<template>
  <!-- 新增部门的弹层 -->
  <!-- 当visible变为false会触发close事件 -->
  <el-dialog
    :title="showTitle"
    :visible="showDialog"
    @close="btnCancel"
  >
    <div>
      <el-form
        ref="form"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item
          label="部门名称"
          prop="name"
        >
          <el-input
            v-model="formData.name"
            style="width: 80%"
            placeholder="1-50个字符"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          label="部门编码"
          prop="code"
        >
          <el-input
            v-model="formData.code"
            style="width: 80%"
            placeholder="1-50个字符"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          label="部门负责人"
          prop="manager"
        >
          <el-select
            v-model="formData.manager"
            style="width: 80%"
            placeholder="请选择"
            @focus="getEmployeesSimple"
          >
            <el-option
              v-for="item in persons"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            />
          </el-select>

        </el-form-item>
        <el-form-item
          label="部门介绍"
          prop="introduce"
        >
          <el-input
            v-model="formData.introduce"
            style="width: 80%"
            placeholder="1-300个字符"
            type="textarea"
            :rows="3"
            maxlength="300"
          />
        </el-form-item>
        <!-- 清空id,第一种方式 -->
        <!-- <el-form-item prop="id" /> -->
      </el-form>
      <el-row
        slot="footer"
        type="flex"
        justify="center"
      >
        <!-- 列被分为24 -->
        <el-col :span="6">
          <el-button
            type="primary"
            size="small"
            @click="btnOK"
          >确定</el-button>
          <el-button
            size="small"
            @click="btnCancel"
          >取消</el-button>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import { addDepartment, getDepartmentDetail, getDepartments, updateDepartment } from '@/api/department.js'
import { getEmployeesSimple } from '@/api/employee.js'
export default {
  name: 'AddDept',
  components: {

  },
  props: {
    showDialog: {
      type: Boolean,
      required: true
    },
    treeNode: { // 新增-父部门,编辑-本部门
      type: Object,
      required: true
    }
  },
  data() {
    const checkNameRepeat = async(rule, value, callback) => {
      // 新增
      // 判断当前的部门名称是否存在同级的部门同名
      // 方式1.通过父组件
      // (1)找到父级部门:this.treeNode
      // (2)找到同级部门:this.treeNode.children
      // 方式2.通过接口
      // (1)找到父级部门:this.treeNode
      // (2)找到同级部门:
      // 所有部门: depts = await getDepartments()
      // 所有的同级部门: depts.filter(t=>t.pid === this.treeNode.id)
      // const borthers = depts.filter(t => t.pid === this.treeNode.id)
      // if (borthers.some(t => t.name === this.formData.name)) {
      // 用链式调用

      // 编辑
      // 判断当前的部门名称是否存在同级的部门同名,排查当前这个部门
      // (1)本部门,this.treeNode
      // (2)找同级部门:
      // 所有部门: depts = await getDepartments()
      // 所有的同级部门: depts.filter(t=>t.pid === this.treeNode.pid)
      // 所有的同级部门,排除当前部门: depts.filter(t=>t.pid === this.treeNode.pid && t.id !== this.treeNode.id)
      let isValid
      const { depts } = await getDepartments()
      if (this.formData.id) {
        // 编辑
        isValid = depts.filter(t => t.pid === this.treeNode.pid && t.id !== this.treeNode.id).some(t => t.name === this.formData.name)
      } else {
        // 新增
        isValid = depts.filter(t => t.pid === this.treeNode.id).some(t => t.name === this.formData.name)
      }
      if (isValid) {
        callback(new Error('同级部门,存在同名的部门'))
      } else {
        callback()
      }
    }
    const checkCodeRepeat = async(rule, value, callback) => {
      // 所有的部门
      const { depts } = await getDepartments()
      let isValid
      debugger
      if (this.formData.id) {
        // 编辑
        // 排查当前编辑这个部门
        // 在原来表单式基础上修改
        /*
        isValid = depts.some(t => {
          return t.code === this.formData.code && t.code && t.id !== this.formData.id
        })
        */
        // 普通写法
        // depts = depts.filter(t => t.id !== this.formData.id)
        // isValid = depts.some(t => t.code === this.formData.code && t.code)
        // 链式调用
        isValid = depts.filter(t => t.id !== this.formData.id).some(t => t.code === this.formData.code && t.code)
        // console.log('isValid', isValid)
      } else {
        // 新增
        isValid = depts.some(t => t.code === this.formData.code && t.code)
      }
      if (isValid) {
        callback(new Error('存在同编号的部门'))
      } else {
        callback()
      }
    }
    return {
      formData: {
        // id: '',
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { trigger: 'blur', validator: checkNameRepeat }
        ], // 部门名称
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          { trigger: 'blur', validator: checkCodeRepeat }
        ], // 部门编码
        manager: [
          { required: true, message: '请选择部门管理者', trigger: 'blur' }
        ], // 部门管理者
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ] // 部门介绍
      },
      persons: []
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '添加子部门'
    }
  },
  created() {
  },
  methods: {
    async getDepartmentDetail(id) {
      this.formData = await getDepartmentDetail(id)
    },
    btnCancel() {
      // 清空id,第二种方式,通过手动
      // this.formData = {
      //   name: '', // 部门名称
      //   code: '', // 部门编码
      //   manager: '', // 部门管理者
      //   introduce: '' // 部门介绍
      // }
      // $options它是组件配置信息,$options.data就是data配置方法
      this.formData = this.$options.data().formData
      this.$emit('update:showDialog', false)
      // 重置表单,但是只重置el-form-item这里prop属性
      this.$refs.form.resetFields()
    },
    async getEmployeesSimple() {
      this.persons = await getEmployeesSimple()
    },
    btnOK() {
      this.$refs.form.validate(async isOk => {
        console.log(isOk)
        if (isOk) {
          if (this.formData.id) {
            // 编辑
            await updateDepartment(this.formData)
          } else {
            // 新增
            await addDepartment({
              ...this.formData,
              pid: this.treeNode.id
            })
          }
          this.$emit('addDeptSuccess')
          this.$emit('update:showDialog', false)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
